<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item label="审核状态">
                    <el-select v-model="searchInfo.status" placeholder="请选择">
                        <el-option
                                v-for="item in statusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="会员">
                    <el-select clearable filterable v-model="searchInfo.userId" placeholder="请选择">
                        <el-option
                                v-for="item in userList"
                                :key="item.ID"
                                :label="item.name"
                                :value="item.ID"
                        />
                    </el-select>
<!--                    <el-input placeholder="搜索条件" v-model="searchInfo.userId"></el-input>-->
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="rt" type="primary">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-popover placement="top" v-model="deleteVisible" width="160">
                        <p>确定要删除吗？</p>
                        <div style="text-align: right; margin: 0">
                            <el-button @click="deleteVisible = false" size="mini" type="text">取消</el-button>
                            <el-button @click="onDelete" size="mini" type="primary">确定</el-button>
                        </div>
                        <!--            <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger">批量删除</el-button>-->
                    </el-popover>
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="tableData"
                @selection-change="handleSelectionChange"
                border
                ref="multipleTable"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
        >

            <el-table-column label="企业名称">
                <template slot-scope="scope">{{scope.row.users.name}}</template>
            </el-table-column>
            <el-table-column label="更新日期" width="180">
                <template slot-scope="scope">{{scope.row.UpdatedAt|formatDate}}</template>
            </el-table-column>
            <!--    -->
            <!--    <el-table-column label="地址" prop="address" width="120"></el-table-column> -->
            <!--    -->
            <!--    <el-table-column label="联系人" prop="cname" width="120"></el-table-column> -->
            <!--    -->
            <!--    <el-table-column label="企业详情说明" prop="content" width="120"></el-table-column> -->
            <!--    -->
            <!--    <el-table-column label="业务联系电话" prop="cphone" width="120"></el-table-column> -->
            <!--    -->
            <!--    <el-table-column label="主营业务介绍" prop="intro" width="120"></el-table-column> -->
            <!--    -->
            <!--    <el-table-column label="logo" prop="logo" width="120"></el-table-column> -->
            <!--    -->
                <el-table-column label="审核状态" width="120">
                    <template slot-scope="scope">
                        <div v-for="item in statusOption" v-if="item.value == scope.row.status">
                            {{ item.label }}
                        </div>
                    </template>
                </el-table-column>

            <!--    <el-table-column label="头图" prop="topPic" width="120"></el-table-column> -->
            <!--    -->
            <!--    <el-table-column label="网址" prop="web" width="120"></el-table-column> -->
            <!--    -->
            <!--    <el-table-column label="用户ID" prop="userId" width="120"></el-table-column> -->

            <el-table-column label="按钮组">
                <template slot-scope="scope">
                    <el-button class="table-button" @click="updateUserIndex(scope.row)" size="small" type="primary"
                               icon="el-icon-edit">变更
                    </el-button>
                              <el-button   size="mini" @click="prevRow(scope.row)">预览</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                :current-page="page"
                :page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                :style="{float:'right',padding:'20px'}"
                :total="total"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="弹窗操作">
            <el-form :model="formData" label-position="right" label-width="80px">
<!--                <el-form-item label="地址:">-->
<!--                    <el-input v-model="formData.address" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="联系人:">-->
<!--                    <el-input v-model="formData.cname" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="企业详情说明:">-->
<!--                    <el-input v-model="formData.content" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="业务联系电话:">-->
<!--                    <el-input v-model="formData.cphone" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="主营业务介绍:">-->
<!--                    <el-input v-model="formData.intro" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="logo:">-->
<!--                    <el-input v-model="formData.logo" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

                <el-form-item label="状态:">
                    <el-select v-model="formData.status" placeholder="请选择">
                        <el-option
                                v-for="item in statusOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>

<!--                <el-form-item label="头图:">-->
<!--                    <el-input v-model="formData.topPic" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="网址:">-->
<!--                    <el-input v-model="formData.web" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->

<!--                <el-form-item label="用户ID:">-->
<!--                    <el-input v-model.number="formData.userId" clearable placeholder="请输入"></el-input>-->
<!--                </el-form-item>-->
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button @click="enterDialog" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        createUserIndex,
        deleteUserIndex,
        deleteUserIndexByIds,
        updateUserIndex,
        findUserIndex,
        getUserIndexList
    } from "@/api/userIndex";
    import { getUsersList } from '@/api/users'
    import {formatTimeToStr} from "@/utils/date";
    import infoList from "@/mixins/infoList";

    export default {
        name: "UserIndex",
        mixins: [infoList],
        data() {
            return {
                userList:[],
                statusOption: [
                    {
                        value: 1,
                        label: '待审核'
                    }, {
                        value: 2,
                        label: '审核驳回'
                    }, {
                        value: 3,
                        label: '审核通过'
                    }
                ],
                listApi: getUserIndexList,
                dialogFormVisible: false,
                type: "",
                deleteVisible: false,
                multipleSelection: [], formData: {
                    address: "",
                    cname: "",
                    content: "",
                    cphone: "",
                    intro: "",
                    logo: "",
                    status: 0,
                    topPic: "",
                    web: "",
                    userId: 0,

                }
            };
        },
        filters: {
            formatDate: function (time) {
                if (time != null && time != "") {
                    var date = new Date(time);
                    return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
                } else {
                    return "";
                }
            },
            formatBoolean: function (bool) {
                if (bool != null) {
                    return bool ? "是" : "否";
                } else {
                    return "";
                }
            }
        },
        methods: {
            rt(){
                this.searchInfo = {}
                this.getTableData()
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1
                this.pageSize = 10
                this.getTableData()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            prevRow(row) {
                window.open("https://yjc.xmzhuchen.com/#/company/"+row.userId, '_blank');
                // this.$confirm('确定要删除吗?', '提示', {
                //     confirmButtonText: '确定',
                //     cancelButtonText: '取消',
                //     type: 'warning'
                // }).then(() => {
                //     this.deleteUserIndex(row);
                // });
            },
            async onDelete() {
                const ids = []
                if (this.multipleSelection.length == 0) {
                    this.$message({
                        type: 'warning',
                        message: '请选择要删除的数据'
                    })
                    return
                }
                this.multipleSelection &&
                this.multipleSelection.map(item => {
                    ids.push(item.ID)
                })
                const res = await deleteUserIndexByIds({ids})
                if (res.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                    if (this.tableData.length == ids.length && this.page > 1) {
                        this.page--;
                    }
                    this.deleteVisible = false
                    this.getTableData()
                }
            },
            async updateUserIndex(row) {
                const res = await findUserIndex({ID: row.ID});
                this.type = "update";
                if (res.code == 0) {
                    this.formData = res.data.reuserIndex;
                    this.dialogFormVisible = true;
                }
            },
            closeDialog() {
                this.dialogFormVisible = false;
                this.formData = {
                    address: "",
                    cname: "",
                    content: "",
                    cphone: "",
                    intro: "",
                    logo: "",
                    status: 0,
                    topPic: "",
                    web: "",
                    userId: 0,

                };
            },
            async deleteUserIndex(row) {
                const res = await deleteUserIndex({ID: row.ID});
                if (res.code == 0) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    if (this.tableData.length == 1 && this.page > 1) {
                        this.page--;
                    }
                    this.getTableData();
                }
            },
            async enterDialog() {
                let res;
                switch (this.type) {
                    case "create":
                        res = await createUserIndex(this.formData);
                        break;
                    case "update":
                        res = await updateUserIndex(this.formData);
                        break;
                    default:
                        res = await createUserIndex(this.formData);
                        break;
                }
                if (res.code == 0) {
                    this.$message({
                        type: "success",
                        message: "创建/更改成功"
                    })
                    this.closeDialog();
                    this.getTableData();
                }
            },
            openDialog() {
                this.type = "create";
                this.dialogFormVisible = true;
            }
        },
        async created() {
            var userlist = await getUsersList({page:1,pageSize:1000000})
            this.userList = userlist.data.list
            await this.getTableData();

        }
    };
</script>

<style>
</style>
